<template>
  <div id="search">
    <div class="box">
      <input type="text" v-model="inpval" @keyup.enter="changeSong" />
      <span @click="inpval = ''">x</span>
    </div>
    <component :is="$store.state.seachShow" class="ss"></component>
  </div>
</template>

<script>
import SearchHotVue from "../../components/SearchHot.vue";
import SearchDefaltVue from "../../components/SearchDefalt.vue";
import SearchResultVue from "../../components/SearchResult.vue";
export default {
  components: { SearchHotVue, SearchDefaltVue, SearchResultVue },
  data() {
    return {
    }
  },
  computed: {
    inpval: {
      set(newVal) {
        this.$store.commit('changeInp', newVal)
      },
      get() {
        return this.$store.state.seachInpval
      }
    },

  },
  watch: {
    inpval(now) {
      this.$store.commit('changeInp', now)
    }
  },

  methods: {
    changeSong() {
      this.$store.commit('changeInp', this.inpval)
      this.$store.commit('showSearRes')

    },

  },
};
</script>

<style lang="scss">
#search {
  > div:first-child {
    display: flex;
    position: relative;
    input {
      flex-grow: 1;
    }
    span {
      position: absolute;
      top: _vw(-1);
      right: _vw(10);
    }
  }
  .box {
    position: fixed;
    top: _vw(0);
  }
  .ss {
    position: absolute;
    top: _vw(160);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    overflow-y: scroll;
  }
}
</style>